<script setup lang="ts">
import { ApiAgencyCommissionBalance } from '~/apis'
import BaseImage from '~/components/BaseImage.vue'

const { t } = useI18n()
const appStore = useAppStore()
const { bonus_limit } = storeToRefs(useAffiliate())
definePageMeta({
    layout: 'header-back',
    title: 'affiliate_program'
  })
const {
  data: balanceAgency,
  runAsync: getBalanceAgency,
} = useRequest(ApiAgencyCommissionBalance)

const {
  run: runTransferToMember,
  loading: loadTransferToMember,
} = useRequest(ApiAgencyTransferToMember, {
  onSuccess() {
    appStore.getBalanceData()
    getBalanceAgency()
  },
})
const agencyInfo = computed(() => {
  if (!balanceAgency.value)
    return '0.00'
  const current_bonus = balanceAgency.value?.balance

  // 大于上限使用上限 0或空 无上限
  if (!(Number(bonus_limit.value) == 0 || !bonus_limit.value) && Number(current_bonus) > Number(bonus_limit.value))
    return bonus_limit.value
  else
    return current_bonus
})

function navigateTo(path: string) {
  i18nNavigateTo(`/affiliate-program/${path}`)
}

const activeTab = ref('invite') // 'invite' 或 'commission'

function switchTab(tab: string) {
  activeTab.value = tab
}

onMounted(async () => {
  appStore.updateUserInfo()
  await application.allSettled(
    [
      getBalanceAgency(),
    ],
  )
})
</script>

<template>
  <section class="affiliate-container">
    <!-- 用户信息 -->
    <section class="user-info-card">
      <section class="user-id">
        {{ t('affiliate_program_account') }}：
        <span class="id-value">{{ balanceAgency?.username }}</span>
      </section>
      <BaseImage width="32px" url="/images/png/affiliate-program/commission-icon.png" class="card-img" />
      <section class="commission">
        {{ t('affiliate_program_available_commission') }}：
        <section class="amount">{{ agencyInfo }}</section>
        <BaseImage width="14px" url="/images/png/statistics/usdt.png" class="img" />
      </section>
      <BaseButton :disabled="Number(agencyInfo) <= 0" :loading="loadTransferToMember" class="withdraw-btn" @click="runTransferToMember">
        {{ t('affiliate_program_withdraw_commission') }}
      </BaseButton>
    </section>
    <!-- 功能导航 -->
    <section class="function-nav">
      <section class="nav-item" @click="navigateTo('my-data')">
        <BaseIcon name="affiliate-my-data-icon" class="text-[24px]" />
        {{ t('affiliate_program_my_data') }}
      </section>
      <section class="nav-item" @click="navigateTo('finance-data')">
        <BaseIcon name="affiliate-finance-data" class="text-[24px]" />
        {{ t('affiliate_program_finance_data') }}
      </section>
      <section class="nav-item" @click="navigateTo('commission-record')">
        <BaseIcon name="affiliate-commission-record-icon" class="text-[24px]" />
        {{ t('affiliate_program_commission_record') }}
      </section>
      <section class="nav-item" @click="navigateTo('commission-detail')">
        <BaseIcon name="affiliate-commission-detail-icon" class="text-[24px]" />
        {{ t('affiliate_program_commission_detail') }}
      </section>
      <section class="nav-item" @click="navigateTo('faq')">
        <BaseIcon name="affiliate-faq-icon" class="text-[24px]" />
        {{ t('affiliate_program_faq') }}
      </section>
    </section>
    <!-- 邀请链接导航栏 -->
    <section class="invite-link-tabs">
      <section class="tab" :class="{ active: activeTab === 'invite' }" @click="switchTab('invite')">
        <BaseIcon name="affiliate-recomend" class="text-[24px] mr-[5px]" :style="{ '--tg-base-icon-color': activeTab === 'invite' ? '#71EA93' : '#B5BEC0' }" />
        {{ t('affiliate_program_invite_link') }}
      </section>
      <section class="tab" :class="{ active: activeTab === 'commission' }" @click="switchTab('commission')">
        <BaseIcon name="affiliate-dash-board" class="text-[24px] mr-[5px]" :style="{ '--tg-base-icon-color': activeTab === 'commission' ? '#71EA93' : '#B5BEC0' }" />
        {{ t('affiliate_program_commission_ratio') }}
      </section>
    </section>

  </section>
</template>

<style scoped lang="scss">
  .affiliate-container {
    background-color: #232626;
    color: white;
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 16px;
  }

  .user-info-card {
    position: relative;
    background-color: #323738;
    border-radius: 8px;
    padding: 8px;

    .user-id {
      z-index: 2;
      font-size: 10px;
      margin: 6px 0 0 6px;
      padding: 4px 10px;
      background-color: #464f50;
      border-radius: 4px;
      display: inline-block;
      font-weight: bold;
      color: #B3BEC1;

      .id-value {
        color: #4cd964;
      }
    }

    .card-img {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 16px;
    }

    .commission {
      padding-top: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 10px;
      font-weight: bold;
      font-size: 12px;

      .amount {
        font-size: 14px;
        color: #4cd964;
        margin: 0 5px;
      }
    }
    .withdraw-btn {
      width: 100%;
      padding: 9px 12px;
      color: #171a1a;
      border: none;
      border-radius: 4px;
      background: linear-gradient(90deg, #24EE89 0%, #9FE871 100%);
      box-shadow: 0px -2px 0px 0px #1DCA6A inset, 0px 0px 12px 0px rgba(35, 238, 136, 0.30);
      font-size: 14px;
      font-weight: bold;
    }
  }

  .function-nav {
    background-color: #3a4142;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    justify-content: space-around;
    color: #B3BEC1;
    font-size: 12px;
    font-weight: 590;
    .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  }

  .invite-link-tabs {
    display: flex;
    padding: 6px 8px;
    background-color: #323738;
    border-radius: 4px;
    height: 48px;
    .tab {
      flex: 1;
      text-align: center;
      padding: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border-radius: 4px;
      color: #b3bec1;
      font-size: 12px;
      font-weight: 590;
      &.active {
        background-color: #3a4142;
        color: #fff;
      }
    }
  }
</style>
